<template>
  <div class="mt10">
    <div class="clearfix">
      <div class="popup">
        <el-dialog
          title="资源位列表"
          :visible.sync="resourcesDialog"
          :close-on-click-modal="false"
          width="998px" top="3vh">
          <div style="height:auto;" class="slotContent">
            <div class="table-container">
              <div class="clearfix table-filters" style="margin-top: 20px;border-bottom:1px solid #eee;padding-bottom:20px;">
                <el-select v-model="sizeValue" filterable placeholder="请输入/选择" @change="changeSize">
                  <el-option
                    v-for="item in sizeList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                <div class="searchbox fr">
                  <i class="el-icon-search" @click="searchResource"></i>
                  <input name="adzoneName" class="input w200" placeholder="搜索资源位" v-model="Tip">
                </div>
              </div>
              <el-table
                ref="multipleTable"
                :data="labels"
                height="460"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-key="getRowKeys"
                :default-sort="{prop: 'adzone_name', order: 'ascending'}"
              >
                <el-table-column
                  type="selection"
                  :reserve-selection="true"
                  width="43">
                </el-table-column>
                <el-table-column
                  fixed
                  prop="adzone_name"
                  label="资源位"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="allow_adv_type_name"
                  label="网站行业"
                  width="97">
                </el-table-column>
                <el-table-column
                  prop="adzone_level_name"
                  label="创意最低等级"
                  width="97">
                </el-table-column>
                <el-table-column
                  label="创意类型"
                  width="107">
                  <template slot-scope="scope">
                    {{returnStr(scope.row.allow_ad_format_list_name)}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="资源位尺寸"
                  width="128">
                  <template slot-scope="scope">
                    {{returnStr(scope.row.adzone_size_list)}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="tpv"
                  label="日均可竞流量"
                  sortable
                  width="106">
                </el-table-column>
                <el-table-column
                  prop="ctr"
                  label="点击率"
                  sortable
                  width="106">
                  <template slot-scope="scope">
                    {{(scope.row.ctr * 100).toFixed(2)}}%
                  </template>
                </el-table-column>
                <el-table-column
                  prop="first_time"
                  label="上架时间"
                  sortable
                  width="106">
                  <template slot-scope="scope">
                    {{scope.row.first_time.substr(0,10)}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="cpc_score"
                  label="点击单价指数"
                  sortable
                  width="150">
                  <template slot-scope="scope">
                    <el-rate
                      v-model="scope.row.cpc_score/2"
                      :colors="['#4f82ff','#4f82ff','#4f82ff']"
                      text-color="#4f82ff"
                      disabled>
                    </el-rate>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="cpm_score"
                  label="展现成本指数"
                  sortable
                  width="150">
                  <template slot-scope="scope">
                    <el-rate
                      v-model="scope.row.cpm_score/2"
                      :colors="['#4f82ff','#4f82ff','#4f82ff']"
                      text-color="#4f82ff"
                      disabled>
                    </el-rate>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="bid_score"
                  label="竞争热度"
                  sortable
                  width="180">
                  <template slot-scope="scope">
                    <el-rate
                      v-model="scope.row.bid_score/2"
                      :colors="['#4f82ff','#4f82ff','#4f82ff']"
                      text-color="#4f82ff"
                      disabled>
                    </el-rate>
                  </template>
                </el-table-column>
                <!--<el-table-column-->
                  <!--prop="name"-->
                  <!--label="偏好度指数"-->
                  <!--sortable-->
                  <!--width="150">-->
                <!--</el-table-column>-->
                <el-table-column
                  prop="rcmd_score"
                  label="综合推荐指数"
                  sortable
                  width="150">
                  <template slot-scope="scope">
                    <el-rate
                      v-model="scope.row.rcmd_score/2"
                      :colors="['#4f82ff','#4f82ff','#4f82ff']"
                      text-color="#4f82ff"
                      disabled>
                    </el-rate>
                  </template>
                </el-table-column>
              </el-table>
              <div id="pages" class="pagination clearfix">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30]"
                  :background="true"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalPage">
                </el-pagination>
              </div>

            </div>
          </div>
          <span slot="footer" class="dialog-footer slotFooter">
            <a href="javascript:;" class="warning" v-show="resources_warning">
              <i class="el-icon-warning"></i>
              请至少选择一个定向标签
            </a>
            <el-button @click="resourcesCancel" size="small">取 消</el-button>
            <el-button type="primary" @click="resourcesConfirm"  size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<style src="./style.styl" scoped lang="stylus"></style>
<script>
  export default {
    props:{
      resourcesDialog: Boolean,
      resourcesMsg:Array
    },
    data() {
      return {
        Tip: '',
        resources_warning: false,
        getRowKeys(row) {
          return row.adzone_id;
        },
        adzone_size_list:[],//资源位尺寸
        currentPage: 1,
        totalPage: 0,
        pageSize: 20,
        labels: [],
        multipleSelection: [],
        resourcesList: [],
        sizeList:[],
        sizeArr:[],
        sizeValue: '全部尺寸',
        sizeValueEnd: '',
        adzone_name:''
      }
    },
    created() {
      this._getList();
    },
    watch: {
      resourcesMsg: function () {
        this.resourcesList=this.resourcesMsg;
        this.toggleSelection(this.resourcesList);
      }
    },
    methods: {
      toggleSelection(rows) {//批量删除
        if (rows) {
          if(this.$refs.multipleTable) this.$refs.multipleTable.clearSelection();
          var _that = this;
          rows.forEach(row => {
            _that.$refs.multipleTable.toggleRowSelection(row,true);
          })
          this.checkList()
        }
      },
      _getList() {//加载列表
        this.$http.get('/zuanzhan/adgroup-adzone/find',{
          params:{
            page_num: this.currentPage,
            page_size: this.pageSize
          }
        }).then((res) => {
//          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data.adzones;
            this.sizeArr = data.data.size_list;
            this.sizeList = ['全部尺寸',...this.sizeArr];
            this.totalPage = data.data.total_count;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      changeSize(){//select尺寸
        if(this.sizeValue == '全部尺寸'){
          this.sizeValueEnd = this.sizeArr.join(',');
        }else{
          this.sizeValueEnd = this.sizeValue;
        }
        this.checkList();
      },
      searchResource(){//搜索资源位名称
//        if(this.Tip){
          this.checkList();
//        }
      },
      checkList() {//筛选后加载列表
        this.$http.get('/zuanzhan/adgroup-adzone/find',{
          params:{
            page_num: this.currentPage,
            page_size: this.pageSize,
            adzone_size_list: this.sizeValueEnd,
            adzone_name:this.Tip
          }
        }).then((res) => {
//          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data.adzones;
            this.totalPage = data.data.total_count;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      returnStr(str){
        return str.join(',');
      },
      handleSizeChange(val) {//改变pageSize
        this.pageSize = val;
        this.checkList();
      },
      handleCurrentChange(val) {//currentPage 改变时会触发
        this.currentPage = val;
        this.checkList();
      },
      handleSelectionChange(val){//当选择项发生变化时会触发该事件
        this.multipleSelection = val;
//        console.log(this.multipleSelection)
      },
      resourcesCancel(){//取消
        this.$emit('dialogData',false);
      },
      resourcesConfirm() {//确认
        if (!this.multipleSelection.length) {
          this.resources_warning = true;
        } else {
          this.resources_warning = false;
          this.resourcesList=this.multipleSelection;
          this.$emit('dialogData',false);
          this.$emit('resourcesData',this.resourcesList);
        }
      }
    }
  }
</script>
<style>
  .el-table td{
    height: 70px;
  }
  .el-table .cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: normal;
    font-size: 12px;
  }
  .mb20{
    margin-bottom: 20px;
  }
  .mt20{
    margin-top: 20px;
  }
  .el-select{
    height: 40px;
  }
</style>
<style scoped lang="stylus">
  .mr5
    margin-right: 5px;

  .slotContent
    padding: 0!important;
    .adzoneGroups
      border-bottom: 1px solid #e6e6e6;
      padding-top: 10px;
      padding: 10px 40px 0;
      margin-bottom: 15px;
      .groupItems
        float: left;
        width: 18%;
        margin-right: 2%;
        .mb5
          margin-bottom: 5px;
          input
            height: auto;
          .s_fs_12
            font-size: 12px;
          .s_fc_9
            color: #999;
        ul
          height: 140px;
          overflow-y: scroll;
          li
            margin-bottom: 5px;
            font-size: 12px;
            input
              height: auto;
    .table-container
      .table-filters
        padding: 0 40px;
        margin-bottom: 15px;
        #isFavor
          width: 140px;
          margin-right: 15px;
          position: relative;
          border-radius: 2px;
        #isPackage
          width: 140px;
          margin-right: 15px;
          position: relative;
        .dropdown
          display: inline-block;
          height: 32px;
          line-height: 30px;
          border: 0;
          outline: 0;
          border-radius: 2px;

  .dropdown-hd
    display: block;
    height: 32px;
    min-width: 100px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    color: #999;
    text-align: left;
    background-color: #fff;
    background-image: none;
    cursor: pointer;
    transition: color .15s ease-out,border-color .15s ease-out;
    padding-right: 20px;
    padding-left: 10px;
    .dropdown-text
      margin-right: 10px;
    .el-icon-arrow-down
      float: right;
      margin-left: 10px;
      margin-top: 2px;
      line-height: 1.4;
      font-size: 8px;
      position: absolute;
      right: 8px;
      top: 8px;
      height: 8px;
      color: #999;
      font-weight: 400;
  .dropdown-list
    position: absolute;
    min-width: 100px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    display: block;
    width: 140px;
    background: #fff;
    z-index: 1000;
    .dropdown-item
      margin: 3px 0;
      padding: 2px 0;
      white-space: nowrap;
      cursor: pointer;
      border-radius: 4px;
      height: auto;
      transition: background-color .15s ease-out;
      overflow: hidden;
      line-height: 25px;
      text-indent: 8px;
      color: #333;
      position: relative;
      &:hover
        background-color: #fafafa;
      &.dropdown-itemselected
        background-color: #4d7fff;
        color: #fff;
      span
        height: 25px;
        line-height: 25px;
        overflow: hidden;
        display: block;
        margin-right: 10px;

  .searchbox
    position: relative;
    .el-icon-search
      position: absolute;
      left: 8px;
      top: 6px;
      font-size: 18px;
      color: #999;
    input
      width: 100%;
      padding-left: 30px;


  .pagination
    background-color: #fafafa;
    padding: 15px;
    line-height: 25px;
    color: #999;
    text-align: right;

</style>

